import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import "../component" as C

Item {

    Theme { id: theme }

    FontLoader {
        id: iconFont
        source: "qrc:/assets/fontawesome-free-6.7.2-desktop/otfs/Font Awesome 6 Free-Solid-900.otf"
    }

    Rectangle {
        anchors.fill: parent
        color: "transparent"
    }
    Loader {
        id: conductivitySettingPage
        source: "qrc:/pages/RangeSettingPage.qml"
        onLoaded: {
            item.title= "电导设置"
            item.type="conductivity"
        }
    }
    Loader {
        id: conductivityCalibrationPage
        source: "qrc:/pages/ConductivityCalibrationPage.qml"
    }
    // 右上角：kg / cal / 参数设置 图片按钮
    Row {
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.topMargin: 20
        anchors.rightMargin: 20
        spacing: 15


        C.ZButtonImage{
            btnImagePressed: "qrc:/assets/weight/cal_pressed.png"
            btnImage:"qrc:/assets/weight/cal.png"
            onClicked: {
                conductivityCalibrationPage.item.visible=true;
            }
        }
        C.ZButtonImage{
            btnImagePressed: "qrc:/assets/icon_settings_parameters_pressed.png"
            btnImage:"qrc:/assets/settings_parameters.png"
            onClicked: {
                var conductivityParam = alarmInfo.getConductivityParam();
                conductivitySettingPage.item.setValue(conductivityParam["hh"],
                                               conductivityParam["h"],
                                               conductivityParam["l"],
                                               conductivityParam["ll"],
                                               conductivityParam["hhStatus"],
                                               conductivityParam["hStatus"],
                                               conductivityParam["lStatus"],
                                               conductivityParam["llStatus"])
                conductivitySettingPage.item.visible=true;
            }
        }
    }

    Row {
        anchors.centerIn: parent
        spacing: 10

        // 电导卡片
        Rectangle {
            width: 600
            height: 700
            radius: 26
            color: "transparent"


            Image {
                anchors.fill: parent
                source: "qrc:/assets/bg.png"
                fillMode: Image.Stretch
            }

            Image {
                width: 48
                height: 48
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.topMargin: 86
                anchors.rightMargin: 86
                fillMode: Image.PreserveAspectFit
                source: {
                    var val = parseFloat(conductivityText.text);
                    var status = (val < 0.5 || val > 2.0) ? "red" : ((val < 1.0 || val > 1.5) ? "orange" : "green");
                    return "qrc:/assets/mainpage/" + status + ".png";
                }
            }

            // 图标和标题在左上角
            Row {
                spacing: 19
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.topMargin: 106
                anchors.leftMargin: 106
                Image {
                    width: 83
                    height: 83
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/assets/mainpage/icon_conductivity_b.png"
                }
                Text {
                    text: "电导"
                    color: "#333333"
                    font.pixelSize: 42
                    font.bold: true
                    verticalAlignment: Text.AlignVCenter
                }
            }

            Item {
                anchors.centerIn: parent
                anchors.verticalCenterOffset: 80
                width: parent.width - 182
                height: 104
                Text {
                    id: conductivityText
                    text: collectionInfo.conductivity
                    font.pixelSize: 94
                    font.bold: true
                    color: "#000000"
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                }
                Text {
                    text: "mS/cm"
                    font.pixelSize: 31
                    color: "#666666"
                    anchors.right: parent.right
                    anchors.bottom: conductivityText.bottom
                    anchors.bottomMargin: 10
                }
            }

            Rectangle {
                width: 350
                height: 47
                radius: 23
                color: '#ffffff'
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottomMargin: 160

                Row {
                    anchors.centerIn: parent
                    spacing: 10
                    Image {
                        source: "qrc:/assets/timeicon.png"
                        width: 20
                        height: 20
                        fillMode: Image.PreserveAspectFit
                        smooth: true
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    Text {
                        text: "电导已使用时间: " + collectionInfo.conUsageTime
                        font.pixelSize: 20
                        color: '#3a3a3a'
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
            }
        }

        // 温度卡片
        Rectangle {
            width: 600
            height: 700
            radius: 26
            color: "transparent"

            Image {
                anchors.fill: parent
                source: "qrc:/assets/bg.png"
                fillMode: Image.Stretch
            }

            Image {
                width: 48
                height: 48
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.topMargin: 86
                anchors.rightMargin: 86
                fillMode: Image.PreserveAspectFit
                source: {
                    var val = parseFloat(tempText.text);
                    var status = (val < 10 || val > 30) ? "red" : ((val < 15 || val > 25) ? "orange" : "green");
                    return "qrc:/assets/mainpage/" + status + ".png";
                }
            }

            Row {
                spacing: 19
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.topMargin: 106
                anchors.leftMargin: 106
                Image {
                    width: 83
                    height: 83
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/assets/mainpage/icon_temperature_b.png"
                }
                Text {
                    text: "温度"
                    color: "#333333"
                    font.pixelSize: 42
                    font.bold: true
                    verticalAlignment: Text.AlignVCenter
                }
            }
            Item {
                anchors.centerIn: parent
                anchors.verticalCenterOffset: 80
                width: parent.width - 182
                height: 104
                Text {
                    id: tempText
                    text: collectionInfo.conTemp
                    font.pixelSize: 94
                    font.bold: true
                    color: "#000000"
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                }
                Text {
                    text: "°C"
                    font.pixelSize: 31
                    color: "#666666"
                    anchors.right: parent.right
                    anchors.bottom: tempText.bottom
                    anchors.bottomMargin: 10
                }
            }

        }
    }
}
